<template>
  <div class="content-sty">
    <LuckyWheel ref="myLucky" with="23.5vw" height="23.5vw" :defaultStyle="defaultStyle" :prizes="prizes"
      :blocks="blocks" @start="startCallback" @end="endCallback" />
    <!-- 转盘按钮-不写在配置项是因为帽子的层级会把转盘压住 -->
    <img src="../images/lucky_btn.png" class="btn-img" @click="startCallback()" alt="">
    <!-- 剩余次数 -->
    <div class="btn">
      <div class="size-btn">
        {{ $t('activity.num_have_size') }}<span>({{ totalLottery > 99 ? '99+' : totalLottery }})</span>
      </div>
    </div>
    <!-- 结果弹窗 -->
    <result-draw-pop ref="resultRef" @getCount="getCount"></result-draw-pop>
    <!-- 大奖or70金币弹框 -->
    <grand-prize ref="grandRef"></grand-prize>
  </div>
</template>
<script>
import { debounce } from "@/common/common";
import { lotteryDraw, lotteryClick } from "@/api/expressOrder";
import resultDrawPop from './result-draw-pop.vue';
import GrandPrize from './grand-prize.vue';
export default {
  components: { resultDrawPop, GrandPrize },
  props: {
    prizes: {
      type: [String, Array],
      default: ''
    },
    totalLottery: {
      type: [Number, String],
      default: 0
    },
    activityId: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      defaultStyle: {
        lineHeight: '18',
        wordWrap: false
      },
      blocks: [],
      winText: '',//得奖文案
      resultInfo: {},
      isEnable: true
    }
  },
  methods: {
    // 点击抽奖按钮会触发star回调
    startCallback: debounce(function () {
      if (!this.isEnable) { return; }
      // 打点
      lotteryClick({ activityId: this.activityId, operateType: 3 }).then().catch(() => {
        this.isEnable = true;//接口报错也启用操作
        this.$emit('isEnable', true);//接口报错也启用操作
      });
      // 抽奖
      lotteryDraw(this.activityId).then((res) => {
        this.resultInfo = res.result;
        // NOT_ENOUGH 剩余次数不足
        if (res.result.result === 'NOT_ENOUGH') {
          this.$refs.resultRef.open({ type: 'NOT_ENOUGH' });
        }
        // COMPLETED 已全部完成
        if (res.result.result === 'COMPLETED') {
          this.$refs.resultRef.open({ type: 'COMPLETED' });
        }
        // PAUSED 已暂停
        if (res.result.result === 'PAUSED') {
          this.$refs.resultRef.open({ type: 'PAUSED' });
        }
        // ENDED 已结束
        if (res.result.result === 'ENDED') {
          this.$refs.resultRef.open({ type: 'ENDED' });
        }
        // SUCCESS 成功
        if (res.result.result === 'SUCCESS' || res.result.result === 'SUCCESS_FULL' || res.result.result === 'SUCCESS_NOT_FULL') {
          this.isEnable = false;//开始转禁止操作
          this.$emit('isEnable', false);//开始转禁止操作
          // 调用抽奖组件的play方法开始游戏
          this.$refs.myLucky.play();
          // 模拟调用接口异步抽奖
          setTimeout(() => {
            this.prizes.forEach((item, index) => {
              if (res.result.rewardIndex === item.rewardIndex) {
                this.winText = item.fonts[0].text;//中奖文案
                // 调用stop停止旋转并传递中奖索引
                this.$refs.myLucky.stop(index)
              }
            });
          }, 3000)
        }
      }).catch(() => {
        this.isEnable = true;//接口报错也启用操作
        this.$emit('isEnable', true);//接口报错也启用操作
      })
    }),
    // 抽奖结束会触发end回调
    endCallback(prize) {
      this.isEnable = true;//启用所以操作
      this.$emit('isEnable', true);//启用所以操作
      // 中奖
      if (this.resultInfo.result === 'SUCCESS') {
        this.$refs.resultRef.open({ type: 'SUCCESS', text: this.winText });
      }
      // SUCCESS_FULL 免运费 
      if (this.resultInfo.result === 'SUCCESS_FULL') {
        this.$refs.grandRef.open('prizePop');
      }
      // SUCCESS_NOT_FULL 70金币
      if (this.resultInfo.result === 'SUCCESS_NOT_FULL') {
        this.$refs.grandRef.open('coinPop');
      }
      // 抽奖后更新次数等数据，向父组件传递数据
      this.$emit('resultChange', this.resultInfo);
    },
    getCount() {
      this.$emit('getCount');
    }
  }
}
</script>

<style lang="less" scoped>
.content-sty {
  width: 538px;
  height: 538px;
  background-image: url('../images/lucky_border.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 44px;
  position: relative;

  .btn-img {
    height: 186px;
    position: absolute;
    top: 176px;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 99;
    cursor: pointer;
  }

  .btn {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    display: flex;
    justify-content: center;

    .size-btn {
      padding: 8px 24px;
      background: #FF3185;
      box-shadow: inset 0px 4px 4px 0px rgba(255, 206, 227, 0.55), inset 0px -3px 4px 0px rgba(112, 4, 44, 0.26);
      border-radius: 25px;
      border: 1px solid #FFFFFF;
      font-weight: 400;
      font-size: 24px;
      color: #FFFFFF;
      line-height: 28px;

      span {
        color: #FFE062;
      }
    }
  }
}
</style>
